<template>
    <div class="tbhb-box" v-if="cRow">
        <div class="tbhb-title">
            <div>
                {{cRow.total}}
            </div>
            <div class="zb-box" v-if="cRow.zb && blockChecked.zbisCheck">
                <span >{{cRow.zb}}</span>
                <span v-if="cRow.zbup && cRow.zbup != ' '" class="p-l-1">{{cRow.zbup}}</span>
            </div>
        </div>
        <div class="tbhb-content">
            <div class="tb-box" v-if="cRow.tb && blockChecked.tbisCheck">
                <span >{{cRow.tb}}</span>
                <span v-if=" cRow.tbup && cRow.tbup != ' '" class="p-l-1">{{cRow.tbup}}</span>
            </div>
            <div class="hb-box" v-if="cRow.hb && blockChecked.hbisCheck">
                <span >{{cRow.hb}}</span>
                <span v-if=" cRow.hbup &&cRow.hbup != ' '" class="p-l-1">{{cRow.hbup}}</span>
            </div>


        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    props: {
        cRow: {
            default: () => {
                return {
                    hb: "",
                    hbup: "",
                    tb: "—",
                    tbup: " ",
                    total: 0,
                    zb: "0.0%",
                }
            },

            type: Object,
        },
        hbFlag: {

        },
        blockChecked: {
            type: Object,
            default: () => {
                return {
                    tbisCheck: true,
                    hbisCheck: true,
                    zbisCheck: true,
                }
            }
        }
    },

    created() {


    }
}
</script>
<style lang="scss">
.tbhb-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tbhb-content {
        display: flex;
        flex-direction: column;
        div {
            height: 16PX;
            display: flex;
            align-items: center;
            justify-content: center;
            // min-width: 50PX;
             min-width: 40px;
            padding: 0 2PX;
            margin-bottom: 3px;
            font-size: 12px;
            color: #A2A2A2;
            &:last-child {
                margin-bottom: 0px !important;
            }
        }
    }
    .tbhb-title {
        display: flex;
        // align-items: center;
        // justify-content: center;
        min-width: 50px;
        padding: 0 5px;
        font-size: 14px;
        color: #1E2521;
        flex-direction: column;
    }
    .tb-box {
        border: 1px solid $--color-pagingJump-color;
        border-radius: 4px;
        background: $--color-pagingJump-bg;
    }
    .hb-box {
        border: 1px solid #fab75d;
        background: rgba(250,183,93,0.15);
        border-radius: 4px;
    }
    .zb-box {
        color: #29adf6;
        font-size: 12px;
    }
    .p-l-1{
        padding-left: 1PX;
    }
}
</style>
